<style scoped lang="scss">
.box {
  background-color: rgb(247, 247, 247);
  height: 100vh;
}

.head {
  height: 100px;
  position: sticky;
  top: 0;
  z-index: 99;

  h3 {
    line-height: 40px;
    font-family: '宋体';
    padding-left: 15px;
    background-color: rgb(51, 111, 230);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: rgb(51, 111, 230);

    h3 {
      line-height: 40px;
      font-family: '宋体';
      padding-left: 15px;
      background-color: rgb(51, 111, 230);
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 99;
      height: 40px;
    }

    height: 40px;
  }

}

.ton {
  background: #fff;
}



main {
  // height: 800px;
  border-radius: 20px;
  background-color: #fff;

  h3 {
    background-color: #fff;
  }

  .demo {
    dl {
      margin: 30px 0;
    }

    .dls {
      display: flex;
      // align-items: center;
      height: 120px;
      margin: 10px 0;

      dd {
        margin-left: 5px;
      }
    }

    background-color: rgb(248, 236, 198);

    p {
      line-height: 35px;
    }

    .dles {
      display: flex;
      align-items: center;
    }
  }
}
</style>

<template>
  <div class="box">
    <div class="head" style="background-color: #fff;">
      <h3>妙手医生 妙手互联网医生</h3>
      <van-search @click="$router.push('/search')" shape="round" background="rgb(51, 111, 230)"
        placeholder="搜索医生，医院，药品，疾病症状" />
    </div>
    <div class="tong">
      <van-notice-bar left-icon="volume-o" background="rgb(254, 245, 239)"
        style="border-radius: 10px;margin: 5px;color: rgb(250, 100, 0);" text="公告:1.自治区卫生热线0951-12320银川市政府热线0951-12345妙手医生互动平台热线2413-23456
                2.为了更好的服务您，即日起您点击医生的“复诊开方”按钮产生的问诊费用均由平台承担！" />
    </div>
    <!-- 预约挂号 -->
    <Card></Card>
    <doctor></doctor>
    <main style="padding: 10px;margin: 10px;background-color: #fff;">
      <h3>为你推荐</h3>
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <HomeList :list="listData" :item-height="1" @scroll-top="scroll"></HomeList> -->
        <div class="demo" style="background-color: #fff;" v-for="(v, i) in listData" :key="i">
          <dl class="dls" @click="onDetail(v)" v-if="v.texttype === '问答'">
            <dt style="background-color: #fff;"><img v-load :src='v.textimage' style="width: 30px;border-radius: 50%;" alt="">
            </dt>
            <dd>
              <p style="background-color: #fff;font-size: 18px;font-weight: 900;">{{ v.texttitle }}</p>
              <p style="background-color: #fff;font-size: 16px;">
                <van-text-ellipsis style="background-color: #fff;" rows="2" :content="v.textdescword" />
              </p>
              <p style="font-size: 14px;color: #666;">&emsp;&emsp;&emsp;&emsp; {{ v.doctorname }} {{ v.doctorstate }}<span
                  style="float: right;background-color: #fff; color: #ccc;font-size: 12px;">{{ v.textcount }} </span>
              </p>
            </dd>
          </dl>
      
            <dl @click="onDetail2(v)" v-else-if="v.texttype === '文章'">
              <p style="font-size: 18px;font-weight: 900;"> {{ v.texttitle }} </p>
              <p style="font-size: 14px;"><van-text-ellipsis rows="2" :content="v.textdescword" />
              </p>
              <p style="font-size: 12px;color: #666;"> <span
                  style="background-color: rgb(255, 220, 255);font-size: 12px;padding: 5px; color: purple;">
                  {{ v.texttype }} </span>
                &emsp; {{ v.textcount }} {{ v.texttype }} </p>
            </dl>


          <dl class="dles" @click="onDetail3(v)" v-else>
            <dd>
              <p style="font-size: 16px;font-weight: 900;"> {{ v.texttitle }} </p>
              <p style="font-size: 12px;color: #666;"><span
                  style="background-color: rgb(248, 236, 198);color: orange;font-size: 12px;padding: 5px;"> {{
                    v.texttype }} </span>&emsp;
                {{ v.textcount }} 收听
              </p>
            </dd>
            <dt><img :src="v.textimage" alt="" style="width: 150px;height: 90px;border: 1px solid #f2f2f2;">
            </dt>
          </dl>
        </div>
      </van-list>
    </main>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import Card from '@/components/card/indexView.vue'
import type { ListItemState } from '../../interView/indexView'
import doctor from '@/components/Home/doctorView.vue'
const router = useRouter()

const loading = ref(true)
const finished = ref(false)
const config = reactive({
  pageCode: 1,
  pageSize: 10
})


const onLoad = () => {
  config.pageCode++
  loading.value = true
  getList()
}
const onDetail = (v: ListItemState) => {
  axios.post('/api/book/read', { id: v.textid })
  router.push({
    path: `/detail/${v.textid}`
  })
}
const onDetail2 = (v: ListItemState) => {
  axios.post('/api/book/read', { id: v.textid })
  router.push({
    path: `/detail2/${v.textid}`
  })
}
const onDetail3 = (v: ListItemState) => {
  axios.post('/api/book/read', { id: v.textid })
  router.push({
    path: `/detail3/${v.textid}`
  })
}

const listData = ref<ListItemState[]>([])
const getList = async () => {
    const res = await axios.get('/api/book/list', { params: { pageCode: config.pageCode, pageSize: 10 } })
    listData.value = [...listData.value, ...res.data.data]
    loading.value = false
}


getList()
</script>